<!-- 客户标签  -->
<script setup lang='ts'>
import type { UnwrapRef } from 'vue'
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { apiListSetupDefined, apiUpdateSetupDefined } from '~/api/resource/setupDefined'
import type { SetupDefinedList, SetupDefinedQuery, SetupDefinedVO } from '~/api/resource/setupDefined/types.ts'
import {
  apiAddFinanceAccountAdjust,
  apiGetFinanceAccountAdjust,
  apiUpdateFinanceAccountAdjust,
} from '~/api/finance/financeAccountAdjust'
import type { FinanceAccountAdjustForm } from '~/api/finance/financeAccountAdjust/types.ts'

const radioValue = ref<number>(1)
const radioRepeatValue = ref<number>(0)
const modalFormRef = ref()
const modalList = shallowRef<SetupDefinedVO[]>([])
const listEdit = ref([])
const displayName = ref()
const setupDefined = ref<SetupDefinedVO>()

const modalForm: UnwrapRef<SetupDefinedList> = reactive<SetupDefinedList>({
  setupDefinedVOs: [],
})

const modalFinanceAccountForm = ref<FinanceAccountAdjustForm>({
  id: null,
  isAdjust: 0,
  adjustValue: 0,
  type: 3, // 1代表收款调节设置2代表需求保护设置3代表客户名称重复设置
})

const modalFinanceAccountProtectForm = ref<FinanceAccountAdjustForm>({
  id: null,
  isAdjust: 0,
  adjustValue: 0,
  type: 2, // 1代表收款调节设置2代表需求保护设置3代表客户名称重复设置
})

function onBlur() {
  updateProtectNameStepDO()
}

const queryForm: SetupDefinedQuery = reactive({
  pageNum: 1,
  pageSize: -1,
  type: 1,
})

const spinning = ref(false)

async function changeDisplayFlag(index?: number) {
  setupDefined.value = modalForm.setupDefinedVOs[index]
  setupDefined.value.displayFlag = setupDefined.value.displayFlag ? 1 : 0
  // if (modalForm.displayName == null)
  //   modalForm.displayName = item?.displayName
  //
  if (setupDefined.value.displayName.toString() === '自定义' || setupDefined.value.displayName === '') {
    message.error('请修改选项名称后再启用!')
    modalForm.setupDefinedVOs[index].displayFlag = false
  }
  else {
    try {
      spinning.value = true
      await apiUpdateSetupDefined(setupDefined.value)
      message.success('操作成功')
      getListLabel()
      spinning.value = false
    }
    catch (e) {
      getListLabel()
      spinning.value = false
    }
  }
}

function showEditName(index?: number) {
  listEdit.value[index] = true

  displayName.value = Object.assign(modalList.value[index].displayName)
  if (modalList.value[index].displayName === '自定义')
    modalList.value[index].displayName = ' '
  console.log('listEdit', listEdit.value)
}

function submitEditName(index?: number) {
  if (modalList.value[index].displayName.trim() === '') {
    modalForm.setupDefinedVOs[index].displayName = ''
  }
  else {
    changeDisplayFlag(index)
    listEdit.value[index] = false
  }
}

function cancelEditName(index?: number) {
  modalForm.setupDefinedVOs[index].displayName = displayName.value
  listEdit.value[index] = false
}

async function getListLabel() {
  await apiListSetupDefined(queryForm).then((res) => {
    if (res.code === 200)
      modalList.value = res.data.records ?? []
    modalForm.setupDefinedVOs = []
    modalList.value.forEach((data) => {
      listEdit.value.push(false)
      modalForm.setupDefinedVOs.push(data)
    })
  })
}

const chnNumChar = ['一', '二', '三', '四', '五', '六', '七', '八', '九']
const chnUnitChar = ['', '十', '百', '千']

function SectionToChinese(index?: number) {
  index = Number.parseInt(index) + 1
  if (index === 10)
    return chnUnitChar[1]
  else if (index > 10 && index < 20)
    return chnUnitChar[1] + chnNumChar[index - 10]
  else
    return chnNumChar[index - 1]
}

async function getFinanceAccountAdjust() {
  await apiGetFinanceAccountAdjust(3).then((res) => {
    if (res.code === 200) {
      if (res.data !== null)
        modalFinanceAccountForm.value = res.data
      radioRepeatValue.value = res.data.isAdjust
    }
  })
}

async function getFinanceAccountProtectAdjust() {
  await apiGetFinanceAccountAdjust(2).then((res) => {
    if (res.code === 200) {
      if (res.data !== null) {
        modalFinanceAccountProtectForm.value = res.data
        radioValue.value = res.data.isAdjust
      }
    }
  })
}

async function changeCustomerStepValue() {
  if (modalFinanceAccountForm.value.id)
    updateCustomerNameStepDO()
  else
    saveCustomerNameStepDO()
}

async function changeProtectValue() {
  if (modalFinanceAccountProtectForm.value.id)
    updateProtectNameStepDO()
  else
    saveProtectNameStepDO()
}

async function updateProtectNameStepDO() {
  await apiUpdateFinanceAccountAdjust(modalFinanceAccountProtectForm.value).then((res) => {
    if (res.code === 200) {
      message.success('保存成功')
      getFinanceAccountProtectAdjust()
    }
  })
}

async function saveProtectNameStepDO() {
  await apiAddFinanceAccountAdjust(modalFinanceAccountProtectForm.value).then((res) => {
    if (res.code === 200) {
      message.success('保存成功')
      getFinanceAccountProtectAdjust()
    }
  })
}

async function updateCustomerNameStepDO() {
  await apiUpdateFinanceAccountAdjust(modalFinanceAccountForm.value).then((res) => {
    if (res.code === 200) {
      message.success('保存成功')
      getFinanceAccountAdjust()
    }
  })
}

async function saveCustomerNameStepDO() {
  await apiAddFinanceAccountAdjust(modalFinanceAccountForm.value).then((res) => {
    if (res.code === 200) {
      message.success('保存成功')
      getFinanceAccountAdjust()
    }
  })
}

onMounted(() => {
  getListLabel()
  getFinanceAccountAdjust()
  getFinanceAccountProtectAdjust()
})
</script>

<template>
  <div class="bh-table-page ">
    <div class="label-div">
      <div v-if="false" class="setting-center-top">
        <div>
          <span class="setting-center-top-label">需求保护设置</span>
          <a-tooltip placement="topLeft">
            <template #title>
              <span>客户保护机制指的是防止同一时间段重复录入相同的客户需求。</span>
            </template>
            <bh-icon class="ml-10px" name="icon-wenhao" />
          </a-tooltip>
        </div>
        <div class="mt-17px">
          <a-radio-group
            v-model:value="modalFinanceAccountProtectForm.isAdjust" style="width: 100%;"
            @change="changeProtectValue"
          >
            <a-row>
              <a-col :span="6">
                <a-radio :value="0">
                  <span :class=" radioValue === 0 ? 'setting-center-top-value-active' : 'setting-center-top-value' ">不启用需求保护机制</span>
                </a-radio>
              </a-col>
              <a-col :span="18" class="my-col flex">
                <a-radio :value="1">
                  <div :class=" radioValue === 1 ? 'setting-center-top-value-active' : 'setting-center-top-value' ">
                    <span>启用客户保护机制。来访</span>
                    <a-input-number
                      v-model:value="modalFinanceAccountProtectForm.adjustValue"
                      :controls="false"
                      :max="10000"
                      :disabled="radioValue !== 1"
                      style="width: 60px;text-align: center;margin: 0 5px"

                      @blur="onBlur"
                    />
                    <span>天内。</span>
                  </div>
                </a-radio>
              </a-col>
            </a-row>
          </a-radio-group>
        </div>

        <div class="my-line-under  mt-6" />

        <div class="mt-31px">
          <span class="setting-center-top-label">客户验重设置</span>
        </div>

        <div class="mt-17px">
          <a-radio-group
            v-model:value="modalFinanceAccountForm.isAdjust" style="width: 100%;"
            @change="changeCustomerStepValue"
          >
            <a-row>
              <a-col :span="6">
                <a-radio :value="0">
                  <span
                    :class=" radioRepeatValue === 0 ? 'setting-center-top-value-active' : 'setting-center-top-value' "
                  >不启用</span>
                </a-radio>
              </a-col>
              <a-col :span="18">
                <a-radio :value="1">
                  <span
                    :class=" radioRepeatValue === 1 ? 'setting-center-top-value-active' : 'setting-center-top-value' "
                  >启用客户称名验重</span>
                </a-radio>
              </a-col>
            </a-row>
          </a-radio-group>
        </div>
      </div>

      <div class="w-full flex justify-start mt-30px mb-5px">
        <div class="bh-item-title">
          <bh-title-bar :font-size="14">
            客户标签维护
          </bh-title-bar>
        </div>
      </div>

      <div class="label-table-div">
        <a-spin
          :spinning="spinning"
        >
          <a-form
            ref="modalFormRef" :model="modalForm" layout="vertical"
            :hide-required-mark="true"
          >
            <template v-for="(item, index) in modalForm.setupDefinedVOs" :key="index">
              <a-row>
                <a-col
                  style="display: flex;align-items: center;height: 28px" :span="3"
                  :class="item.displayFlag ? 'enable-check-active' : 'enable-check' "
                >
                  <span>选项</span><span v-text="SectionToChinese(item.displayIndex)" />
                </a-col>
                <a-col
                  style="display: flex;align-items: center;height: 28px" :span="9"
                  :class="item.displayFlag ? 'enable-check-active' : 'enable-check' "
                >
                  <a-form-item
                    v-if="listEdit[index]" :name=" `setupDefinedVOs.${index}.displayName` "
                    :class="modalForm.setupDefinedVOs[index].displayName === '' ? 'my-error-input' : ''"
                  >
                    <div class="flex flex-center">
                      <a-input v-model:value="item.displayName" style="width: 140px;" />
                      <span v-if="modalForm.setupDefinedVOs[index].displayName === '' " class="error-tip">不能为空</span>
                    </div>
                  </a-form-item>
                  <span v-else>{{ item.displayName }}</span>
                </a-col>
                <a-col style="display: flex;align-items: center;height: 28px" :span="3">
                  <bh-icon
                    v-if="!listEdit[index]" class="mb-4px" name="icon-bianji"
                    :style="{ cursor: 'pointer', fontSize: '15px' }" @click="showEditName(index)"
                  />
                  <bh-icon
                    v-if="listEdit[index]" class="mb-4px" name="icon-queding"
                    :style="{ cursor: 'pointer', fontSize: '15px' }" @click="submitEditName(index)"
                  />
                  <bh-icon
                    v-if="listEdit[index]" class="ml-10px mb-4px" name="icon-quxiao"
                    :style="{ cursor: 'pointer', fontSize: '15px' }" @click="cancelEditName(index)"
                  />
                </a-col>
                <a-col style="display: flex;align-items: center;height: 28px" :span="8">
                  <a-checkbox v-model:checked="item.displayFlag" @change="changeDisplayFlag(index)">
                    <span :class="item.displayFlag ? 'enable-check-active' : 'enable-check' ">启用</span>
                  </a-checkbox>
                </a-col>
              </a-row>
            </template>
          </a-form>
        </a-spin>
      </div>
    </div>
  </div>
</template>

<style scoped lang='less'>
.bh-table-page {
  @import "@/assets/styles/bh-modal";
  @import "@/assets/styles/bh-drawer";

  background-color: var(--bg-color);
  padding: 6px;
  border-radius: var(--bh-border-radius-large);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .label-div {
    width: 800px;
    display: flex;
    flex-direction: column;
  }

  .setting-center-top {
    margin-top: 30px;
    height: 230px;

    background: #FCFCFC;
    border-radius: 8px;
    padding: 30px 50px;
  }

  .setting-center-top-label {
    font-size: 14px;
    color: var(--bh-color-3);
    font-weight: 500;
  }

  .setting-center-top-value-active {
    font-size: 12px;
    color: var(--bh-color-3);
    font-weight: 500;
  }

  .setting-center-top-value {
    font-size: 12px;
    color: var(--bh-color-9);
    font-weight: 500;
  }

  .my-line-under {
    border-top: 1px solid rgba(245, 245, 245, 1);
  }

  .label-table-div {
    background: var(--bh-color-fc);
    border-radius: 8px;
    width: 100%;
    padding: 41px 50px;
    margin-bottom: 30px;
  }

  .enable-check {
    font-size: 12px;
    color: var(--bh-color-9);
    font-weight: 500;
  }

  .enable-check-active {
    font-size: 12px;
    color: var(--bh-color-3);
    font-weight: 500;
  }

  .error-tip {
    margin-left: 10px;
    color: var(--bh-color-form-required_mark);
  }

  .my-error-input .ant-input {
    border: 1px solid red !important;
  }

}

:deep(.my-col)
.ant-input-number-sm input.ant-input-number-input {
  text-align: center !important;
}

.ant-form-item {
  margin-bottom: 0 !important;
}
</style>
